<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>TM Piano</title>
        <style type="text/css">
            li {
                margin: 2px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <h1>TM Piano の作り方</h1>
        
        <ul>
            <li>
                <a href="./step0/index.html">Step0</a> - ピアノを表示しよう!
            </li>
            <li>
                <a href="./step1/index.html">Step1</a> - クリックで音を鳴らそう!
            </li>
            <li>
                <a href="./step2/index.html">Step2</a> - アニメーションさせよう!
            </li>
            <li>
                <a href="./step3/index.html">Step3</a> - キー入力で音を鳴らそう!
            </li>
            <li>
                <a href="./complete/index.html">Complete</a> - 自動再生させよう!!
            </li>
            <li>
                <a href="./return/index.html">Return</a> - 返ってきました! 読み込みによる遅延を解消!!
            </li>
        </ul>
        
        <p>
            解説は<a href="http://tmlife.net/programming/javascript/html5-audio-javascript-piano.html">こちら</a>
        </p>
    </body>
</html>
